<section class="grid grid-cols-6 mx-2" hx-ext="response-targets" id="debug-view">
    <article class="col-span-1">
        <div id="debug-select-error" class="max-w-md"></div>
        <label class="form-control w-full max-w-xs">
            <div class="label">
                <span class="label-text">Packet to dissect</span>
            </div>
            <select
                name="id"
                class="select select-primary w-full max-w-xs"
                hx-get="/api/v1/frames"
                hx-target="#frame-selecter"
                hx-target-error="#debug-select-error"
                hx-swap="outerhtml"
            >
                <option value="-1">Select a packet</option>
                {{range .packets}}
                    <option value="{{.PacketID}}">{{.DebugName.Name}}</option>
                {{end}}
            </select>
        </label>
        <button
            class="btn btn-error btn-sm mt-2"
            hx-delete='/api/v1/frames'
            hx-confirm="Are you sure you want to delete all frames? This action cannot be undone."
            hx-target="#debug-view"
            hx-target-error="#debug-select-error"
            hx-swap="outerHTML"
        >
            <i class="bi-trash3-fill"></i>
            Prune all frames ({{HumanReadableSize .totalSize}})
        </button>
        <div id="frame-selecter"></div>
    </article>
    <article class="col-span-5">
        <div id="debug-output"></div>
    </article>
</section>